<template>
	<div class="container">
		<div class="layout">
			<!-- 左侧导航 -->
			<div class="sidebar">
				<div class="sidebar-content">
					<h1 class="title">问题视频管理</h1>
					<div class="category-list">
						<div v-for="(category, index) in categories" :key="index" class="category-item"
							:class="{ 'active-category': activeCategory === index }" @click="activeCategory = index">
							<div class="category-content">
								<i class="el-icon-video-camera"></i>
								<span class="category-name">{{ category.name }}</span>
								<span class="category-count">{{ category.count }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 主内容区 -->
			<div class="main-content">
				<!-- 搜索区域 -->
				<div class="search-section">
					<div class="search-bar">
						<div class="search-input">
							<i class="el-icon-search"></i>
							<input type="text" placeholder="搜索视频问题..." class="search-field">
						</div>
						<el-button type="primary" class="filter-btn" @click="showFilter = !showFilter">
							高级筛选
							<i class="el-icon-filter"></i>
						</el-button>
					</div>

					<!-- 筛选条件 -->
					<div v-show="showFilter" class="filter-section">
						<div class="filter-grid">
							<el-select v-model="filterType" placeholder="问题类型">
								<el-option v-for="type1 in problemTypes" :key="type1.value" :label="type1.label"
									:value="type1.value" />
							</el-select>
							<el-select v-model="filterStatus" placeholder="处理状态">
								<el-option v-for="status in statusOptions" :key="status.value" :label="status.label"
									:value="status.value" />
							</el-select>
							<el-date-picker v-model="dateRange" type="daterange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" />
						</div>
					</div>
				</div>

				<div class="video-list-section">
					<div class="list-header">
						<el-radio-group v-model="viewType">
							<el-radio-button label="grid">网格视图</el-radio-button>
							<el-radio-button label="list">列表视图</el-radio-button>
						</el-radio-group>

						<div class="action-buttons">
							<el-button type="primary">
								<i class="el-icon-download"></i>
								导出
							</el-button>
							<el-button type="danger">
								<i class="el-icon-delete"></i>
								批量删除
							</el-button>
						</div>
					</div>
					<div v-if="viewType === 'grid'" class="grid-view">
						<div v-for="(video, index) in videos" :key="index" class="video-card">
							<div class="thumbnail-wrapper">
								<img :src="video.thumbnail" class="thumbnail">
								<el-tag :type="priorityTagType(video.priority)" size="small" class="priority-tag">
									{{ video.priority }}优先级
								</el-tag>
							</div>
							<div class="video-info">
								<h3 class="video-title">{{ video.title }}</h3>
								<p class="video-description">{{ video.description }}</p>
								<div class="video-footer">
									<el-tag :type="statusTagType(video.status)">
										{{ video.status }}
									</el-tag>
									<span class="video-date">{{ video.date }}</span>
								</div>
							</div>
						</div>
					</div>
					<el-table v-else :data="videos" class="list-table">
						<el-table-column label="视频标题" min-width="300">
							<template slot-scope="{ row }">
								<div class="table-title">
									<img :src="row.thumbnail" class="table-thumbnail">
									<div class="table-title-text">
										<div class="title-main">{{ row.title }}</div>
										<div class="title-sub">{{ row.description }}</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="问题类型" width="120">
							<template slot-scope="{ row }">
								<el-tag>{{ row.type }}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="优先级" width="100">
							<template slot-scope="{ row }">
								<el-tag :type="priorityTagType(row.priority)">
									{{ row.priority }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="状态" width="100">
							<template slot-scope="{ row }">
								<el-tag :type="statusTagType(row.status)">
									{{ row.status }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="提交时间" width="180">
							<template slot-scope="{ row }">
								{{ row.date }}
							</template>
						</el-table-column>
					</el-table>

					<!-- 分页 -->
					<div class="pagination">
						<el-pagination :current-page="currentPage" :page-sizes="[12, 24, 36, 48]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next" :total="100" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeCategory: 0,
				showFilter: false,
				viewType: 'grid',
				filterType: '',
				filterStatus: '',
				dateRange: [],
				currentPage: 1,
				pageSize: 12,
				categories: [{
						name: '功能异常',
						count: 28
					},
					{
						name: '界面问题',
						count: 15
					},
					{
						name: '性能问题',
						count: 12
					},
					{
						name: '崩溃问题',
						count: 8
					},
					{
						name: '其他问题',
						count: 5
					}
				],
				problemTypes: [{
						value: '1',
						label: '功能异常'
					},
					{
						value: '2',
						label: '界面问题'
					},
					{
						value: '3',
						label: '性能问题'
					},
					{
						value: '4',
						label: '崩溃问题'
					}
				],
				statusOptions: [{
						value: '1',
						label: '待处理'
					},
					{
						value: '2',
						label: '处理中'
					},
					{
						value: '3',
						label: '已解决'
					}
				],
				videos: [{
						title: '登录界面卡顿问题',
						description: '用户反馈在登录过程中出现严重卡顿，影响使用体验',
						type: '性能问题',
						priority: '高',
						status: '处理中',
						date: '2024-01-15 14:30',
						thumbnail: 'https://ai-public.mastergo.com/ai/img_res/ebdf53c58f496a2aa1cfe274fdcf09e1.jpg'
					},
					{
						title: '视频播放黑屏',
						description: '移动端视频播放时出现黑屏现象，需要重新加载才能正常显示',
						type: '功能异常',
						priority: '高',
						status: '待处理',
						date: '2024-01-15 10:15',
						thumbnail: 'https://ai-public.mastergo.com/ai/img_res/f47e718da4147191e50d42d98f7023af.jpg'
					},
					{
						title: '数据加载超时',
						description: '大数据量请求时接口响应缓慢，导致用户等待时间过长',
						type: '性能问题',
						priority: '中',
						status: '已解决',
						date: '2024-01-14 16:45',
						thumbnail: 'https://ai-public.mastergo.com/ai/img_res/589aba88979bd4f8a6df8ce8ecf60926.jpg'
					},
					{
						title: '按钮点击无响应',
						description: '支付确认按钮在特定情况下点击没有任何反应',
						type: '功能异常',
						priority: '高',
						status: '处理中',
						date: '2024-01-14 09:20',
						thumbnail: 'https://ai-public.mastergo.com/ai/img_res/4cb6ad00f5d4ba27ce17c541615436b4.jpg'
					},
					{
						title: '图片上传失败',
						description: '批量上传图片时随机出现上传失败，没有错误提示',
						type: '功能异常',
						priority: '中',
						status: '待处理',
						date: '2024-01-13 15:30',
						thumbnail: 'https://ai-public.mastergo.com/ai/img_res/e4c10bdabd87405c2c960edabd64d5a0.jpg'
					},
					{
						title: '页面布局错乱',
						description: '在不同分辨率下页面元素位置发生偏移，影响正常使用',
						type: '界面问题',
						priority: '低',
						status: '已解决',
						date: '2024-01-13 11:25',
						thumbnail: 'https://ai-public.mastergo.com/ai/img_res/7b57a8d521d23bb989b843f679f91b2e.jpg'
					}
				]
			}
		},
		methods: {
			priorityTagType(priority) {
				return {
					'高': 'danger',
					'中': 'warning',
					'低': 'info'
				} [priority]
			},
			statusTagType(status) {
				return {
					'待处理': 'warning',
					'处理中': 'primary',
					'已解决': 'success'
				} [status]
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f9fafb;
	}

	.layout {
		display: flex;
	}

	/* 左侧导航样式 */
	.sidebar {
		width: 256px;
		height: 100vh;
		position: fixed;
		background: white;
		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	}

	.sidebar-content {
		padding: 24px;
	}

	.title {
		font-size: 20px;
		font-weight: 600;
		margin-bottom: 32px;
	}

	.category-list {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.category-item {
		cursor: pointer;
		padding: 8px;
		border-radius: 8px;
	}

	.category-item:hover {
		background-color: #f8f9fa;
	}

	.active-category {
		background-color: #eff6ff;
	}

	.category-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.category-name {
		margin-left: 12px;
	}

	.category-count {
		color: #6b7280;
		font-size: 14px;
	}

	/* 主内容区样式 */
	.main-content {
		margin-left: 256px;
		padding: 32px;
		flex-grow: 1;
	}

	.search-section {
		background: white;
		border-radius: 8px;
		padding: 24px;
		margin-bottom: 24px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.search-bar {
		display: flex;
		gap: 16px;
		align-items: center;
	}

	.search-input {
		flex: 1;
		position: relative;
	}

	.search-field {
		width: 100%;
		padding: 8px 8px 8px 32px;
		border: 1px solid #e5e7eb;
		border-radius: 6px;
	}

	.search-field:focus {
		outline: none;
		border-color: #3b82f6;
		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
	}

	.el-icon-search {
		position: absolute;
		left: 8px;
		top: 50%;
		transform: translateY(-50%);
		color: #9ca3af;
	}

	.filter-section {
		margin-top: 16px;
		padding: 16px;
		background: #f8fafc;
		border-radius: 6px;
	}

	.filter-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}

	/* 视频列表样式 */
	.video-list-section {
		background: white;
		border-radius: 8px;
		padding: 24px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
	}

	.action-buttons {
		display: flex;
		gap: 12px;
	}

	/* 网格视图样式 */
	.grid-view {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.video-card {
		background: white;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		transition: box-shadow 0.3s;
	}

	.video-card:hover {
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.thumbnail-wrapper {
		position: relative;
		aspect-ratio: 16/9;
		background: #f3f4f6;
	}

	.thumbnail {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.priority-tag {
		position: absolute;
		top: 8px;
		right: 8px;
	}

	.video-info {
		padding: 16px;
	}

	.video-title {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 8px;
	}

	.video-description {
		color: #6b7280;
		font-size: 14px;
		margin-bottom: 12px;
	}

	.video-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.video-date {
		color: #6b7280;
		font-size: 14px;
	}

	/* 列表视图样式 */
	.list-table {
		margin-top: 16px;
	}

	.table-title {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.table-thumbnail {
		width: 96px;
		height: 64px;
		border-radius: 4px;
		object-fit: cover;
	}

	.title-main {
		font-weight: 500;
	}

	.title-sub {
		color: #6b7280;
		font-size: 14px;
	}

	.pagination {
		margin-top: 24px;
		display: flex;
		justify-content: flex-end;
	}
</style>